<template>
  <div class="seek">
    <view v-if="props.viewMode == 'list'">
      <userItem v-for="(item, index) in userList" :key="index" :data="item" />
    </view>
    <view v-else-if="props.viewMode == 'avatar'">
      <div class="twolie">
        <UserTwoItem v-for="(item, index) in userList" :key="index" :data="item" />
      </div>
    </view>
    <view v-else>
      <UserBigItem v-for="(item, index) in userList" :key="index" :data="item" />
    </view>
    <view class="loading-text">
      {{ finish ? '没有更多数据~' : '正在加载...' }}
    </view>
  </div>
</template>
<script setup lang="ts">
import userItem from './userItem.vue'
import { ref, onMounted, defineProps, watch } from 'vue'
import type { PageResult, PageParams } from '@/types/index/gloabl'
import { onReachBottom } from '@dcloudio/uni-app'
import type { UserItem } from '@/types/index/home'
import { getlisttui, getlisttong, getlistpi } from '@/services/search'
import UserBigItem from './userBigItem.vue'
import UserTwoItem from './userTwoItem.vue'
const props = defineProps({
  data: {
    type: Object,
  },
  activeTablist: {
    type: String,
    default: '推荐',
  },
  viewMode: {
    type: String,
    default: 'list',
  },
})
// 分页参数
const pageParams: Required<PageParams> = {
  page: 1,
  page_size: 2,
}
const userList = ref<UserItem[]>([])
// 已结束标记
const finish = ref(false)
const ReachBottomStatus = ref(false)
let fileUrl = ref('')
const getlist = async () => {
  const res = await getlisttui({ ...props.data, page: pageParams.page }) //请求数据接口
  fileUrl = res.fileUrl
  return res.data
}

const getlist1 = async () => {
  let res = await getlisttong({ ...props.data, page: pageParams.page })
  fileUrl = res.fileUrl
  return res.data
}

const getlist2 = async () => {
  let res = await getlistpi({ ...props.data, page: pageParams.page })
  fileUrl = res.fileUrl
  return res.data
}

const Reachbottom = async () => {
  if (!ReachBottomStatus.value) {
    ReachBottomStatus.value = true
    let data: UserItem[] = []
    if (props.activeTablist == '匹配我1') {
      await getlist2().then((res) => {
        data = res
      })
    } else if (props.activeTablist == '同城1') {
      await getlist1().then((res) => {
        data = res
      })
    } 
    else {
      await getlist().then((res) => {
        data = res
      })
    }
    data = data.map(item=>{
      return {
        ...item,
        avatar: fileUrl + item.avatar
      }
    })
    pageParams.page++ // 添加页码
    finish.value = data.length === 0 // 判断当前是否存在返回数据 如果存在那么添加如果不存在显示没有更多数据
    if (finish.value) {
      return uni.showToast({ icon: 'none', title: '没有更多数据~' }) // 显示更多胡数据
    }
    userList.value.push(...data) //将内容补充到userList中
    ReachBottomStatus.value = false
  }
}
onMounted(async () => {
  await Reachbottom()
})
// 触底加载
onReachBottom(async () => {
  await Reachbottom()
})

watch(props, async (newd) => {
  finish.value = false
  userList.value = []
  pageParams.page = 1
  ReachBottomStatus.value = false
  await Reachbottom()
})
</script>
<style lang="scss" scoped>
// 加载提示文字
.loading-text {
  text-align: center;
  font-size: 28rpx;
  color: #666;
  padding: 20rpx 0;
  margin-bottom: 20rpx;
}
.twolie {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}
</style>
